<!--
 * @Author: your name
 * @Date: 2020-05-23 13:49:06
 * @LastEditTime: 2020-05-23 18:28:48
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \tuyibo\admin\src\components\global\changePassword.vue
--> 
<template>
        






  <el-dialog title="修改密码" :visible="showChangePasswordModal" width="500px" @close="close"
    :append-to-body="true" :close-on-click-modal="false">
    <el-form :model="form" :rules="rules" ref="changePasswordForm">
      <el-form-item label="原密码" prop="oldPassword" :label-width="formLabelWidth">
        <el-input v-model="form.oldPassword" placeholder="请输入原密码" type="password" ref="oldkey" show-password></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword" :label-width="formLabelWidth">
        <el-input v-model="form.newPassword" placeholder="请输入新密码" type="password" show-password></el-input>
      </el-form-item>
      <el-form-item label="重复新密码" prop="checkPassword" :label-width="formLabelWidth">
        <el-input v-model="form.checkPassword" placeholder="请再次输入新密码" type="password" show-password></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" :loading="button_loading" @click="submitForm('changePasswordForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
  export default {
    name: "changePassword",
    props:['showChangePasswordModal',"userInfo"],
    data() {
      var validatePass2 = (rule, value, callback) => {
           if (value === "") {
            callback(new Error("请再次输入密码"));
          } else if (value !== this.form.newPassword) {
           callback(new Error("两次输入密码不一致!"));
            } else {
            callback();
          }
        };
      return {
        rules:{
          oldPassword: [ { required: true, message: "请输入密码" } ],
          newPassword: [ { required: true, message: "请输入新密码" } ],
          checkPassword: [ { required: true, validator: validatePass2, trigger: "blur" } ]
        },
        button_loading:false,
        formLabelWidth:"100px",
        form:{
          username:this.userInfo.name,
          oldPassword:'',
          newPassword:'',
          checkPassword:''
        },
      };
    },

    methods: {
      close() {
        this.initResetEdit()
        this.closeLoginModal();
        this.$refs.changePasswordForm.resetFields();
        this.button_loading=false
      },
      initResetEdit() {
        return (this.form = {
          oldPassword:'',
          newPassword:''
        });
      },
      checkPwd(){},
      submitForm(name){
        this.form.username=this.userInfo.name
        this.$refs[name].validate(valid => {
          if(valid){
            this.button_loading=true
            this.axios.post('/account/changePassword',this.form)
            .then(res=>{
              if(res.code==200){
                this.$message.success("修改成功");
                this.close()
              }else{
                this.$message.error("修改失败")
                this.button_loading=false
                this.$refs.oldkey.focus()
              }
            }).catch(err=>{
              this.button_loading=false
              console.log(err)
            })
          }
        })
      },
      closeLoginModal() {
        //关闭登录框
        this.$parent.closeModal()
      },
    }
  };
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
 
  
</style>